<template>
	<div class="footer">
		<!-- 微信底部导航SVG存放 -->
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
		 	<defs>
		 		<symbol viewBox="0 0 1024 1024" id="wx">
		 			<path d="M512 231.424c183.296 0 331.776 125.952 331.776 280.576S695.296 792.576 512 792.576c-67.584 0-133.12-17.408-189.44-50.176l-16.384-9.216-17.408 6.144-72.704 25.6 24.576-55.296 10.24-22.528-15.36-20.48c-35.84-46.08-55.296-99.328-55.296-154.624 0-154.624 148.48-280.576 331.776-280.576m0-40.96c-205.824 0-372.736 143.36-372.736 321.536 0 66.56 23.552 128 63.488 179.2l-63.488 141.312 162.816-56.32c59.392 34.816 132.096 56.32 209.92 56.32 205.824 0 372.736-143.36 372.736-321.536 0-176.128-166.912-320.512-372.736-320.512z" fill="#979797" p-id="15230"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="wxlight">
		 			<path d="M512 190.464c-205.824 0-372.736 143.36-372.736 321.536 0 66.56 23.552 128 63.488 179.2l-63.488 141.312 162.816-56.32c59.392 34.816 132.096 56.32 209.92 56.32 205.824 0 372.736-143.36 372.736-321.536 0-176.128-166.912-320.512-372.736-320.512z" fill="#46bf18" p-id="14668"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="address">
		 			<path d="M716.8 369.664h163.84v40.96H716.8zM676.864 492.544H880.64v40.96H676.864zM716.8 615.424h163.84v40.96H716.8z" fill="#979797" p-id="10284"></path><path d="M553.984 602.112c-8.192-4.096-13.312-12.288-13.312-22.528v-10.24c0-7.168 3.072-14.336 9.216-19.456 45.056-34.816 73.728-94.208 73.728-161.792 0-106.496-72.704-192.512-162.816-192.512S297.984 282.624 297.984 389.12c0 66.56 28.672 124.928 71.68 159.744 6.144 4.096 9.216 11.264 9.216 19.456v13.312c0 9.216-5.12 18.432-13.312 22.528C268.288 652.288 143.36 721.92 143.36 775.168v52.224h634.88v-52.224c0-53.248-125.952-123.904-224.256-173.056z m-93.184 184.32H184.32v-11.264c2.048-7.168 19.456-45.056 199.68-135.168 22.528-11.264 35.84-33.792 35.84-58.368v-13.312c0-20.48-9.216-38.912-24.576-51.2-35.84-28.672-56.32-75.776-56.32-128 0-83.968 54.272-151.552 121.856-151.552S582.656 305.152 582.656 389.12c0 53.248-21.504 101.376-58.368 129.024-15.36 12.288-25.6 31.744-25.6 52.224v10.24c0 24.576 14.336 47.104 35.84 58.368C717.824 730.112 736.256 768 737.28 776.192v11.264H460.8z" fill="#979797" p-id="10285"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="addresslight">
		 			<path d="M716.8 369.664h163.84v40.96H716.8zM676.864 492.544H880.64v40.96H676.864zM716.8 615.424h163.84v40.96H716.8z" fill="#46C01B" p-id="6629"></path><path d="M553.984 602.112c-8.192-4.096-13.312-12.288-13.312-22.528v-10.24c0-7.168 3.072-14.336 9.216-19.456 45.056-34.816 73.728-94.208 73.728-161.792 0-106.496-72.704-192.512-162.816-192.512S297.984 282.624 297.984 389.12c0 66.56 28.672 124.928 71.68 159.744 6.144 4.096 9.216 11.264 9.216 19.456v13.312c0 9.216-5.12 18.432-13.312 22.528C268.288 652.288 143.36 721.92 143.36 775.168v52.224h634.88v-52.224c0-53.248-125.952-123.904-224.256-173.056z" fill="#46C01B" p-id="6630"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="find">
		 			<path d="M874.048 149.952c-199.936-199.936-524.16-199.936-724.096 0s-199.936 524.16 0 724.096 524.16 199.936 724.096 0S1073.984 349.888 874.048 149.952zM184.64 839.36C3.84 658.56 3.84 365.44 184.64 184.64s473.92-180.8 654.72 0 180.8 473.92 0 654.784S365.44 1020.16 184.64 839.36z" p-id="11496" fill="#979797"></path><path d="M437.376 432.704l-187.008 345.664 339.072-193.6 193.6-339.072L437.376 432.704zM516.672 545.536C498.112 545.536 483.136 530.56 483.136 512c0-18.496 15.04-33.536 33.536-33.536 18.496 0 33.536 15.04 33.536 33.536C550.208 530.56 535.168 545.536 516.672 545.536z" p-id="11497" fill="#979797"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="findlight">
		 			<path d="M511.880785 22.632463c-270.647093 0-490.050082 219.402989-490.050082 490.050082 0 270.647093 219.402989 490.051105 490.050082 490.051105s490.050082-219.402989 490.050082-490.051105C1001.930867 242.035452 782.528901 22.632463 511.880785 22.632463zM559.583227 550.373982l-323.364759 214.894302 216.940914-315.178309 319.271534-204.66124L559.583227 550.373982z" p-id="11699" fill="#46bf18"></path><path d="M506.371304 503.301897m-36.839023 0a36 36 0 1 0 73.678046 0 36 36 0 1 0-73.678046 0Z" p-id="11700" fill="#46bf18"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="me">
		 			<path d="M957.824835 821.484633c-0.305969-1.723248-3.442402-17.366529-19.25146-35.833113-20.001543-23.362081-50.655703-40.8555-91.112114-51.993165-0.587378-0.161682-1.188058-0.288572-1.790786-0.379647-1.650593-0.248663-163.254178-25.28385-220.326011-92.034113-2.527566-19.522636-0.701988-35.291784 1.068332-50.574862 0.072655-0.626263 0.145309-1.251503 0.216941-1.87265 9.697873-13.420661 40.801265-60.795645 33.688263-107.362216 6.393617-6.949272 17.23657-18.886139 25.795503-29.091572 16.386202-19.539009 24.845874-68.289316 20.924565-95.625918-1.553379-10.830673-5.03569-18.475793-10.616802-23.260773-1.484817-1.576915-3.347235-3.047406-5.54939-4.182252 3.569292-30.333866 8.676613-88.126106 1.88186-128.891556-0.249687-1.499144-0.720408-2.952238-1.396813-4.312212-1.930979-3.8814-48.14758-95.228875-123.903961-110.519116-0.595564-0.119727-1.197268-0.204661-1.803066-0.25378l-57.809637-4.66423c-1.305739-0.106424-2.622734-0.042979-3.914146 0.186242-1.172709 0.207731-29.002544 5.179976-53.891398 12.71151-0.575098 0.173962-1.13894 0.381693-1.689479 0.621147-3.680832 1.604544-90.439802 40.014342-116.210745 101.18554-0.611937 1.453095-0.9967 2.992147-1.139963 4.561899-0.38374 4.196579-7.867178 87.719854-1.856277 141.643997-5.666046 1.119497-11.311627 3.77293-16.85283 7.9296-2.926656 2.194992-4.973268 5.363148-5.770424 8.933463-0.331551 1.483794-7.80271 36.791951 18.690688 79.614246 0.938372 1.574868 7.179516 11.856026 16.288988 22.172999 10.175757 11.523451 20.377096 19.125593 30.465872 22.728654 1.236154 19.537985 7.807826 56.57553 36.570917 99.440803 1.208525 27.927049-1.034563 57.239656-4.982478 64.559365-9.533121 7.714705-73.933873 56.733119-198.838627 81.570807-0.225127 0.045025-0.448208 0.094144-0.671289 0.149403-3.615341 0.88823-89.076758 22.51683-135.879714 87.850837-1.867534 2.606361-2.871397 5.732561-2.871397 8.93858l0 101.936647c0 8.477069 6.872524 15.349593 15.349593 15.349593l862.07305 0c8.477069 0 15.349593-6.872524 15.349593-15.349593L958.060195 824.165696C958.060195 823.267233 957.981401 822.369793 957.824835 821.484633zM927.361009 912.021649 95.987145 912.021649 95.987145 830.508147c39.567157-51.413973 110.22952-70.702272 115.117854-71.983451 143.731542-28.66383 211.175607-87.11815 213.979466-89.594551 0.545422-0.481977 1.055029-1.001817 1.52575-1.555425 5.227048-6.14086 11.391445-17.937534 12.669554-54.962799 0.645706-18.694781-0.270153-35.297924-0.310062-35.995819-0.159636-2.835581-1.103124-5.569856-2.724041-7.90197-36.796044-52.897767-33.863249-95.277994-33.726126-96.972589 0.550539-4.579295-1.000793-9.060353-4.204765-12.382005-3.217275-3.334955-7.780197-4.928243-12.397355-4.52813-0.152473 0.013303-0.304945 0.019443-0.465604 0.019443-9.656941 0-25.885554-18.795065-33.877575-32.343639-0.064468-0.109494-0.12996-0.218988-0.197498-0.327458-13.406335-21.61939-15.530718-39.839357-15.465227-49.545416 3.562129 6.953366 11.589966 9.607822 18.949584 6.736425 7.529487-2.938935 11.20111-11.770068 8.766664-19.47761-10.17985-32.237215-5.281283-120.123868-2.284019-154.531516 21.065781-46.078455 90.473571-78.858022 98.514711-82.528622 19.339464-5.77861 41.082674-10.028401 47.53155-11.236925l54.842049 4.423753c55.184857 11.755742 93.943602 79.576383 100.614535 91.978854 7.821129 51.801806-4.865821 136.258337-4.996804 137.117914-1.006933 6.605442 2.37407 13.103436 8.361435 16.068977 3.361561 1.663896 7.110955 2.000564 10.573823 1.127683 0.738827 6.235005 0.88516 16.449647-1.111311 30.193673-2.998287 20.642133-8.731872 35.118845-13.083993 40.308031-12.163017 14.502295-29.906124 33.475416-30.083156 33.665751-3.592828 3.838422-4.971222 9.248641-3.65218 14.338566 10.748808 41.497113-28.667923 92.313475-29.05371 92.804662-1.785669 2.25946-2.90005 4.975315-3.215228 7.838525-0.212848 1.935072-0.440022 3.891633-0.669242 5.875824-2.02717 17.512862-4.326539 37.361933-0.321318 62.911842 0.409322 2.611477 1.485841 5.072529 3.1262 7.145747 60.479443 76.464509 225.829352 103.861486 241.439888 106.295931 40.882106 11.402701 62.537312 28.209482 73.52148 40.3418 9.484002 10.474562 12.777001 19.306718 13.677511 22.242584L927.359986 912.021649z" p-id="18757" fill="#979797"></path>
		 		</symbol>
		 		<symbol viewBox="0 0 1024 1024" id="melight">
		 			<path d="M853.517187 762.672156c0 0-186.91097-18.107403-238.321874-105.935728-5.354961-27.669176-6.127558-48.231491-4.02978-67.306942 0 0 35.626405-74.254168 39.45357-117.713982 0 0 12.800537-13.599739 25.972535-29.305443 17.845437-21.278629 29.30749-89.318258 15.010879-98.849332 0 0-7.232728-10.326183-16.400528-0.843204 0 0 14.33345-93.878111 4.802376-151.064554 0 0-21.162995-75.43404-61.353346-94.233198 0 0-64.264653-27.848255-106.977453-23.613814-24.548092 2.433422-70.857814 13.831007-96.297206 21.529339 0 0-73.887824 30.417777-86.160335 100.480482 0 0-7.471159 119.510908 6.825452 164.782997 0 0-9.720386-16.978696-28.782533-2.682086 0 0-7.074116 31.674397 17.624403 71.504544 0 0 18.255783 36.663014 46.104037 45.232181 0 0 8.032954 46.77021 47.127344 109.964484 0 0-0.070608 67.50751-13.066597 82.774215 0 0-50.127677 73.603345-216.893842 101.927437-35.495422 6.028297-80.653925 17.73185-122.287137 73.924663l0 106.696044 891.608737 0L957.475887 841.914942C957.478957 841.914942 948.036911 788.692786 853.517187 762.672156z" p-id="18917" fill="#46bf18"></path>
		 		</symbol>
		 	</defs>
		 </svg>
		<ul class="clear">
			<router-link to="/dialogue" tag="li" class="footer_li">
				<section class="li_svg">
					<svg>
			    		<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('dialogue') !== -1 ? '#wxlight' : '#wx'"></use>
					</svg>
				</section>
				<section class="li_text" :class="$route.path.indexOf('dialogue') !== -1 ? 'colortext' : 'color' " >微信</section>
			</router-link>
			<router-link to="/addressbook" tag="li" class="footer_li">
				<section class="li_svg">
					<svg>
			    		<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('addressbook') !== -1 ? '#addresslight' : '#address'"></use>
					</svg>
				</section>
				<section class="li_text" :class="$route.path.indexOf('addressbook') !== -1 ? 'colortext' : 'color' " >通讯录</section>
			</router-link>
			<router-link to="/find" tag="li" class="footer_li">
				<section class="li_svg">
					<svg>
			    		<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('find') !== -1 ? '#findlight' : '#find'"></use>
					</svg>
					<i class="findwarn" v-if="firendwarn"></i>
				</section>
				<section class="li_text" :class="$route.path.indexOf('find') !== -1 ? 'colortext' : 'color' " >发现</section>
			</router-link>
			<router-link to="/me" tag="li" class="footer_li">
				<section class="li_svg">
					<svg>
			    		<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('me') !== -1 ? '#melight' : '#me'"></use>
					</svg>
				</section>
				<section class="li_text" :class="$route.path.indexOf('me') !== -1 ? 'colortext' : 'color' " >我</section>
			</router-link>
		</ul>	
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		created(){
			
		},
		mounted(){
			
		},
		components:{

		},
		computed:{
			...mapState([
				'firendwarn', 
			]),
		},
		methods:{

		}
	}
</script>
<style lang="scss" scoped>
	@import "../../style/public";
	.footer{
		position: fixed;
		bottom:0;
		@include widthHeight(100%, auto);
		background:#fcfcfc;
		border-top:1px solid #d4d4d4;
		ul{
			@include widthHeight(100%, 2.2826666667rem);
			@include justify(space-around);
			box-sizing:border-box;
			.footer_li{
				float: left;
				@include widthHeight(25%, 2.2826666667rem);
				text-align:center;
				position: relative;
				.li_svg{
					@include leftcenter;
					top:0.3rem;
					@include widthHeight(1.224rem,1.224rem);
					svg{
						@include widthHeight(100%,100%);
					}
					.findwarn{
						display:block;
						position: absolute;
						right:-0.11rem;
						top:-0.11rem;
						@include widthHeight(0.4266666667rem,0.4266666667rem);
						@include bg('../../images/warn.png');
						border-radius:50%;
					}
				}
				.li_text{
					text-align:center;
					@include sizeColor(0.4693333333rem, #979797);
					margin-top:1.4933333333rem;
				}
				.color{
					color:#979797;
				}
				.colortext{
					color:#46bf18;
				}
			}
			.footer_li:nth-of-type(2){
				.li_svg{
					top:0.2413333333rem;
					@include widthHeight(1.324rem,1.324rem);
				}
				
			}
			.footer_li:nth-of-type(3){
				.li_svg{
					top:0.3813333333rem;
					@include widthHeight(.89rem,.89rem);
				}
				
			}
			.footer_li:nth-of-type(4){
				.li_svg{
					top:0.2813333333rem;
					@include widthHeight(1.08rem,1.08rem);
				}
				
			}
			
		}
	}
</style>